<template>
  <div class="home-container">
    <!-- 欢迎信息 -->
    <div class="welcome-section">
      <div class="welcome-text">
        <h2>欢迎回来，{{ data.user.name }}</h2>
        <p>{{ getCurrentTime() }}</p>
      </div>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stats-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>今日订单数</span>
                <el-icon><Tickets /></el-icon>
              </div>
            </template>
            <div class="card-content">
              <div class="number">{{ statistics.todayOrders }}</div>
              <div class="label">较昨日 {{ statistics.orderChange > 0 ? '+' : ''}}{{ statistics.orderChange }}%</div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="stats-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>今日收入</span>
                <el-icon><Money /></el-icon>
              </div>
            </template>
            <div class="card-content">
              <div class="number">¥{{ statistics.todayIncome }}</div>
              <div class="label">较昨日 {{ statistics.incomeChange > 0 ? '+' : ''}}{{ statistics.incomeChange }}%</div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="stats-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>房间总数</span>
                <el-icon><House /></el-icon>
              </div>
            </template>
            <div class="card-content">
              <div class="number">{{ statistics.totalRooms }}</div>
              <div class="sub-stats">
                <span>已租: {{ statistics.occupiedRooms }}</span>
                <span>空闲: {{ statistics.availableRooms }}</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="stats-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>待处理预约</span>
                <el-icon><Calendar /></el-icon>
              </div>
            </template>
            <div class="card-content">
              <div class="number">{{ statistics.pendingAppointments }}</div>
              <div class="label">今日新增 {{ statistics.todayNewAppointments }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 快捷功能区 -->
    <div class="quick-access">
      <h3 class="section-title">快捷功能</h3>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in quickAccess" :key="item.path">
          <el-card class="quick-card" shadow="hover" @click="router.push(item.path)">
            <el-icon :size="24">
              <component :is="item.icon" />
            </el-icon>
            <span class="quick-text">{{ item.title }}</span>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最近订单 -->
<!--    <div class="recent-orders">-->
<!--      <h3 class="section-title">最近订单</h3>-->
<!--      <el-table :data="recentOrders" style="width: 100%" v-loading="loading">-->
<!--        <el-table-column prop="orderNo" label="订单号" width="180" />-->
<!--        <el-table-column prop="roomType" label="房间类型" width="120" />-->
<!--        <el-table-column prop="customerName" label="客户姓名" width="120" />-->
<!--        <el-table-column prop="amount" label="金额" width="120">-->
<!--          <template #default="scope">-->
<!--            ¥{{ scope.row.amount }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="status" label="状态" width="120">-->
<!--          <template #default="scope">-->
<!--            <el-tag :type="getOrderStatusType(scope.row.status)">-->
<!--              {{ getOrderStatusText(scope.row.status) }}-->
<!--            </el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="createTime" label="创建时间" />-->
<!--      </el-table>-->
<!--    </div>-->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Tickets, Money, House, Calendar, Document, Setting, Bell, UserFilled } from '@element-plus/icons-vue'
import request from '@/utils/request'

const router = useRouter()
const loading = ref(false)

const data = reactive({
  user: JSON.parse(localStorage.getItem('localStorageUser'))
})

// 统计数据
const statistics = reactive({
  todayOrders: 0,
  orderChange: 0,
  todayIncome: 0,
  incomeChange: 0,
  totalRooms: 0,
  occupiedRooms: 0,
  availableRooms: 0,
  pendingAppointments: 0,
  todayNewAppointments: 0
})

// 快捷功能
const quickAccess = [
  { title: '房间管理', path: '/owner_manager/room_information', icon: 'House' },
  { title: '预约处理', path: '/owner_manager/appointment', icon: 'Calendar' },
  { title: '订单管理', path: '/owner_manager/order', icon: 'Document' },
  { title: '个人信息', path: '/owner_manager/person', icon: 'UserFilled' }
]

// 最近订单列表
// const recentOrders = ref([])

// 获取当前时间问候语
const getCurrentTime = () => {
  const hour = new Date().getHours()
  if (hour < 6) return '凌晨好'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 17) return '下午好'
  if (hour < 19) return '傍晚好'
  if (hour < 22) return '晚上好'
  return '夜里好'
}

// 获取订单状态类型
const getOrderStatusType = (status) => {
  const statusMap = {
    'pending': 'warning',
    'paid': 'success',
    'cancelled': 'info',
    'completed': 'success'
  }
  return statusMap[status] || 'info'
}

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    'pending': '待支付',
    'paid': '已支付',
    'cancelled': '已取消',
    'completed': '已完成'
  }
  return statusMap[status] || '未知状态'
}

// 加载统计数据
const loadStatistics = async () => {
  try {
    const res = await request.get('/owner/statistics',{
      params: {
        ownerId: data.user.id
      }
    })
    if (res.code === '200') {
      Object.assign(statistics, res.data)
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 加载最近订单
// const loadRecentOrders = async () => {
//   loading.value = true
//   try {
//     const res = await request.get('/owner/recent-orders')
//     if (res.code === '200') {
//       recentOrders.value = res.data
//     }
//   } catch (error) {
//     console.error('加载最近订单失败:', error)
//   } finally {
//     loading.value = false
//   }
// }

onMounted(() => {
  loadStatistics()
})
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-section {
  margin-bottom: 24px;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  padding: 24px;
  border-radius: 8px;
  color: white;
}

.welcome-text h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.welcome-text p {
  margin: 8px 0 0;
  font-size: 16px;
  opacity: 0.9;
}

.stats-container {
  margin-bottom: 24px;
}

.stats-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

.card-content {
  text-align: center;
  padding: 10px 0;
}

.card-content .number {
  font-size: 28px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 8px;
}

.card-content .label {
  font-size: 14px;
  color: #666;
}

.sub-stats {
  display: flex;
  justify-content: space-around;
  color: #666;
  font-size: 14px;
}

.section-title {
  margin: 24px 0 16px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.quick-access {
  margin-bottom: 24px;
}

.quick-card {
  cursor: pointer;
  text-align: center;
  padding: 20px;
  transition: all 0.3s;
}

.quick-card:hover {
  transform: translateY(-3px);
}

.quick-text {
  display: block;
  margin-top: 8px;
  font-size: 14px;
}

.recent-orders {
  margin-bottom: 24px;
}

:deep(.el-card__header) {
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style>